<%--
  Created by IntelliJ IDEA.
  User: MING
  Date: 2017/11/18
  Time: 17:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/common/tagPage.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="${baseurl}bite/css/animsition.min.css" />
    <link rel="stylesheet" href="${baseurl}bite/css/drop-down.css" />
    <link rel="stylesheet" href="${baseurl}bite/css/common.css" />
    <link rel="stylesheet" href="${baseurl}bite/css/qk.css" />
</head>
<body>

<div class="data_wrap" style="width: 1020px; padding: 10px; overflow: hidden;">
    <div class="animsition">
        <div class="qk_wrap">
            <div class="qk_top">总用户数<span>500</span><p>2017.11.11</p></div>
            <div class="qk_top">在线用户数<span>200</span><p>2017.11.11</p></div>
            <div class="qk_top">今日活跃人数<span>50</span><p>2017.11.11</p></div>
        </div>
        <div class="qk_wrap">
            <div>
                <h3>人员状况</h3>
                <div id="main1" class="my_main"></div>
            </div>
            <div>
                <h3>在线状况</h3>
                <div id="main2" class="my_main"></div>
            </div>
        </div>

    </div>
</div>
</div>

<script src="${baseurl}bite/js/jquery-1.10.2.js"></script>
<script src="${baseurl}bite/js/jquery-ui-1.11.0.js"></script>
<script src="${baseurl}bite/js/select-widget-min.js"></script>
<script src="${baseurl}bite/js/jquery.animsition.min.js"></script>
<script src="${baseurl}bite/js/echarts.js"></script>
<script src="${baseurl}bite/js/macarons .js"></script>
<script src="${baseurl}bite/js/common.js"></script>

<script>
    $(document).ready(function() {
        //初始化切换
        $(".animsition").animsition({

            inClass               :   'fade-in-right',
            outClass              :   'fade-out',
            inDuration            :    1500,
            outDuration           :    800,
            linkElement           :   '.animsition-link',
            // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
            loading               :    true,
            loadingParentElement  :   'body', //animsition wrapper element
            loadingClass          :   'animsition-loading',
            unSupportCss          : [ 'animation-duration',
                '-webkit-animation-duration',
                '-o-animation-duration'
            ],
            //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
            //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".

            overlay               :   false,

            overlayClass          :   'animsition-overlay-slide',
            overlayParentElement  :   'body'
        });

        //虚拟数据
        var date = ['2016/11/1','2016/11/2','2016/11/3','2016/11/4','2016/11/5','2016/11/6','2016/11/7','2016/11/8','2016/11/9','2016/11/10',
            '2016/11/11','2016/11/12','2016/11/13','2016/11/14','2016/11/15','2016/11/16','2016/11/17','2016/11/18'
            ,'2016/11/19','2016/11/20','2016/11/21','2016/11/22','2016/11/23','2016/11/24','2016/11/25','2016/11/26','2016/11/27'
            ,'2016/11/28','2016/11/29','2016/11/30'];


        function my_data(){
            var data = [];
            for( var i =0; i<30; i++){
                data.push(Math.round(Math.random() * (500 - 100) + 100));
            };
            return data;
        }
        var num = my_data();
        var bl = '30%';

        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        // 使用
        require(
                [
                    'echarts',
                    'echarts/chart/bar',
                    'echarts/chart/line',
                    'echarts/chart/pie'// 使用柱状图就加载bar模块，按需加载
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('main1'),'macarons');
                    var myChart2 = ec.init(document.getElementById('main2'),'macarons');
//		                var myChart3 = ec.init(document.getElementById('main3'),'macarons');
//		                var myChart4 = ec.init(document.getElementById('main4'),'macarons');

                    var option = {
                        backgroundColor:'white',
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['注册人数'],
                            y:'20'
                        },
                        grid:{
                            y:'100'
                        },
                        toolbox: {
                            show : false,
                            y:'20',
                            feature : {
                                mark : {show: false},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        dataZoom : {
                            show : true,
                            realtime : true,
                            y: 320,
                            height: 20,
                            start : 87,
                            end : 100
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : date
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'注册人数',
                                type:'line',
                                stack: '总量',
                                barMaxWidth : 30,
                                itemStyle:{
                                    normal:{
                                        borderWidth : 3
                                    }
                                },
                                data:my_data()
                            },

                        ]
                    };
                    var option2 = {
                        backgroundColor:'white',
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['在线'],
                            y:'20'
                        },
                        grid:{
                            y:'100'
                        },
                        toolbox: {
                            show : false,
                            y:'20',
                            feature : {
                                mark : {show: false},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        dataZoom : {
                            show : true,
                            realtime : true,
                            y: 320,
                            height: 20,
                            start : 87,
                            end : 100
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : date
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'在线',
                                type:'line',
                                stack: '　人',
                                barMaxWidth : 30,
                                itemStyle:{
                                    normal:{
                                        borderWidth : 3
                                    }
                                },
                                data:my_data()
                            },

                        ]
                    };

                    var option3 = {
                        backgroundColor:'white',
                        tooltip : {
                            trigger: 'axis',
                            formatter : function(data){
                                console.log(data);
                                return data[1].name + '</br>人数：' + data[1].value + '</br>占比：' + bl
                            }
                        },
                        legend: {
                            selectedMode : false,
                            data:['人数','占比'],
                            y:'20'
                        },
                        grid:{
                            y:'100'
                        },
                        toolbox: {
                            show : false,
                            y:'20',
                            feature : {
                                mark : {show: false},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        dataZoom : {
                            show : true,
                            realtime : true,
                            y: 320,
                            height: 20,
                            start : 87,
                            end : 100
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : date
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'人数',
                                type:'line',
                                stack: '总量',
                                barMaxWidth : 30,
                                itemStyle:{
                                    normal:{
                                        borderWidth : 3
                                    }
                                },
                                data:num
                            },
                            {
                                name:'占比',
                                type:'line',
                                stack: '占比',
                                barMaxWidth : 30,
                                show : false,
                                itemStyle:{
                                    normal:{
                                        borderWidth : 3,
                                        //color :'#32dadd'
                                    }
                                },
                                data:num
                            },

                        ]
                    };
                    var option4 = {
                        backgroundColor:'white',
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient : 'vertical',
                            x : 'right',
                            y : 'center',
                            data:['PC端','移动端','微信']
                        },
                        toolbox: {
                            show : false,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {
                                    show: true,
                                    type: ['pie', 'funnel'],
                                    option: {
                                        funnel: {
                                            x: '25%',
                                            width: '50%',
                                            funnelAlign: 'center',
                                            max: 1548
                                        }
                                    }
                                },
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : false,
                        series : [
                            {
                                name:'访问来源',
                                type:'pie',
                                center:['50%','55%'],
                                radius : ['40%', '52%'],
                                itemStyle : {
                                    normal : {
                                        label : {
                                            show : false
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    },
                                    emphasis : {
                                        label : {
                                            show : true,
                                            position : 'center',
                                            textStyle : {
                                                fontSize : '30',
                                                fontWeight : 'bold'
                                            }
                                        }
                                    }
                                },
                                data:[
                                    {value:335, name:'PC端'},
                                    {value:310, name:'移动端'},
                                    {value:234, name:'微信'}
                                ]
                            }
                        ]
                    };


                    //var ecConfig = require('echarts/config');


                    // 为echarts对象加载数据 
                    myChart.setOption(option);
                    myChart2.setOption(option2);
                    //myChart3.setOption(option3);
                    //myChart4.setOption(option4);

                    /*myChart3.on(ecConfig.EVENT.LEGEND_SELECTED, function(param){
                     if(param.type == 'legendSelected'){
                     return;
                     }
                     });*/

                }
        );




    });
</script>
</body>
</html>

